<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="product-img-wrapper">
          <el-image
            :src="product.cover"
            :preview-src-list="['./food.png']"
            fit="cover"
            style="width: 100%; height: 100%"
          ></el-image>
        </div>
      </el-col>
      <el-col :span="12">
        <h2>{{ product.name }}</h2>
        <p class="product-detail">{{product.foodDescribe}}</p>
        <p class="product-sales">销售量:{{product.sale}}份 </p>
      </el-col>
       <el-col :span="6">
         <h1 class="product-price" >价格：{{product.price}}￥</h1>
          <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="intoCart"></el-button>
       </el-col>
     
    </el-row>
    <el-divider></el-divider>
  </div>
</template>

<script>
import productService from "../../service/ProductService";
import cartService from "../../service/CartService";
export default {
  props: ["product", "shopId"],
  data() {
    return {
      choosedSpec: "",
      currentSpec: {},
    };
  },
  methods: {
    showPrice() {
      return this.choosedSpec;
    },
    getPriceRange(product) {
      const price = productService.getProductPriceRange(product);
      if (price.lowPrice === price.highPrice) {
        return price.lowPrice;
      }
      return price.lowPrice + "-" + price.highPrice;
    },
    handleSpecClick(item1) {
      this.currentSpec = item1;
    },
    async intoCart() {
      try {
        //console.log(this.product.id)
        await cartService.addProduct({    
          productId: this.product.id,
          quantity: 1,
        });
        this.$message.success(this.choosedSpec + "加入购物车成功");
        // 触发购物车更新
        this.$store.commit("updateLastProductAddTime");
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.product-img-wrapper {
  width: 200px;
  height: 128px;
  .el-image {
    border-radius: 5px;
  }
}
li :hover {
  cursor: pointer;
}
h2 {
  font-size: 18px;
  margin: 0;
}
.product-detail {
  font-size: 14px;
  color: #666;
}
.product-sales {
  font-size: 14px;
}
.product-price {
  margin: 0;
  margin-bottom: 40px;
  font-size: 24px;
  color: #f60;
}
.el-button {
  margin-left: 30px;
}
</style>
